<template>
  <div>
    <basic-container>
        <tabspane ref="tabsPaneEle" :tabList="tabList" @changeTabsPane="changeTabsPane">
            <template slot="tabsDetail">
                <avue-form
                    ref="form2"
                    :option="option" v-model="form"
                    @submit="handleSubmit"
                    @error="formError">
                </avue-form>
            </template>
        </tabspane>

    </basic-container>
  </div>
</template>

<script>
import tabspane from "@/page/tabsPane";
import {getUserInfo, updateInfo, updatePassword} from "@/api/system/user";
import md5 from 'js-md5';
import func from "@/util/func";
import {mapGetters} from "vuex";

  export default {
    data() {
        var valiPassWord = (rule, value, callback) => {
            // 是数字
            let isDigit = /^.*[0-9]+.*/;
            // isLowerCase 字母
            let isCase = /^.*[a-zA-Z]+.*/;
            // isUpperCase 大写字母
            // let isUpperCase = /^.*[A-Z]+.*/;
            // 特殊字符
            let regEx = /^.*[^a-zA-Z0-9]+.*/;
            if (!isDigit.test(value) || !isCase.test(value) || !regEx.test(value)) {
                callback(new Error('密码必须同时包含数字、字母、特殊字符'))
            }else {
                callback();
            }
        };
        var valiPassWord2 = (rule, value, callback) => {
            // 是数字
            let isDigit = /^.*[0-9]+.*/;
            // isLowerCase 字母
            let isCase = /^.*[a-zA-Z]+.*/;
            // isUpperCase 大写字母
            // let isUpperCase = /^.*[A-Z]+.*/;
            // 特殊字符
            let regEx = /^.*[^a-zA-Z0-9]+.*/;
            if (!isDigit.test(value) || !isCase.test(value) || !regEx.test(value)) {
                callback(new Error('密码必须同时包含数字、字母、特殊字符'))
            }else {
                callback();
            }
            if(this.form.newPassword !== this.form.newPassword1) {
                callback(new Error('两次密码不一致'))
            }else {
                callback();
            }
        };
        return {
            index: 1,
            option: {},
            form: {},
            forms: {},
            tabList: [
                {
                    label: "个人信息",
                    name: "userInfo",
                    option: {
                        column: [
                            {
                                label: '头像',
                                type: 'upload',
                                listType: 'picture-img',
                                propsHttp: {
                                    url: 'data'
                                },
                                canvasOption: {
                                    text: ' ',
                                    ratio: 0.1
                                },
                                action: '/api/dis-dashboard/oss/file/upload',
                                tip: '只能上传jpg/png用户头像，且不超过500kb',
                                span: 12,
                                row: true,
                                prop: 'avatar'
                            },
                            {
                                label: '姓名',
                                span: 12,
                                row: true,
                                prop: 'name'
                            },
                            {
                                label: '用户名',
                                span: 12,
                                row: true,
                                prop: 'realName'
                            },
                            {
                                label: '手机号',
                                span: 12,
                                row: true,
                                prop: 'phone'
                            },
                            {
                                label: '邮箱',
                                prop: 'email',
                                span: 12,
                                row: true,
                            }
                        ]
                    },
                },
                {
                    label: "修改密码",
                    name: "password",
                    option: {
                        column: [
                            {
                                label: '原密码',
                                span: 12,
                                row: true,
                                type: 'password',
                                prop: 'oldPassword',
                                rules: [
                                    {
                                        required: true,
                                        message: "请输入原密码",
                                        trigger: "blur"
                                    }
                                ]
                            },
                            {
                                label: '新密码',
                                span: 12,
                                row: true,
                                type: 'password',
                                prop: 'newPassword',
                                rules: [
                                    { required: true, message: "请输入原密码", trigger: "blur" },
                                    { min: 8, message: '长度至少8个字符', trigger: 'blur' },
                                    {
                                        validator: valiPassWord,
                                        trigger: 'blur'
                                    }
                                ]
                            },
                            {
                                label: '确认密码',
                                span: 12,
                                row: true,
                                type: 'password',
                                prop: 'newPassword1',
                                rules: [
                                    { required: true, message: "请输入原密码", trigger: "blur" },
                                    { min: 8, message: '长度至少8个字符', trigger: 'blur' },
                                    {
                                        validator: this.valiPassWord2,
                                        trigger: 'blur',
                                    }
                                ]
                            }
                        ]
                    }
                }
            ]
        };
    },
    components: {
        tabspane
    },
    computed:{
      ...mapGetters(['userInfo'])
    },
    created() {
        let tab = {
            name: this.tabList[0].name
        }
        this.changeTabsPane(tab);
        this.handleWitch();
    },
    methods: {
        handleSubmit(form, done) {
          let th = this
            if (this.index === 0) {
                updateInfo(form).then(res => {
                    if (res.data.success) {
                      this.$message({
                          type: "success",
                          message: "修改信息成功!"
                      });
                      th.userInfo.phone = form.phone
                      th.userInfo.avatar = form.avatar
                      th.userInfo.email = form.email
                      th.userInfo.realName = form.realName
                      th.userInfo.name = form.name
                      th.$store.commit('SET_USER_INFO',th.userInfo)
                    } else {
                    this.$message({
                        type: "error",
                        message: res.data.msg
                    });
                    }
                    done();
                }, error => {
                    window.console.log(error);
                    done();
                })
            } else {
                updatePassword(md5(form.oldPassword), md5(form.newPassword), md5(form.newPassword1)).then(res => {
                    if (res.data.success) {
                    this.$message({
                        type: "success",
                        message: "修改密码成功!"
                    });
                    } else {
                    this.$message({
                        type: "error",
                        message: res.data.msg
                    });
                    }
                    done();
                }, error => {
                    window.console.log(error);
                    done();
                })
            }
        },
        handleWitch() {
            if (this.index === 0) {
                getUserInfo().then(res => {
                    const user = res.data.data;
                    this.form = {
                        id: user.id,
                        avatar: user.avatar,
                        name: user.name,
                        realName: user.realName,
                        phone: user.phone,
                        email: user.email,
                    }
                });
            }
        },
        handleTabClick(index) {
            this.index = index;
            this.handleWitch();
        },
        changeTabsPane(tab) {
            this.tabList.forEach((item, index) => {
                if(tab.name == item.name) {
                    this.option = item.option;
                    this.index = index
                    this.handleTabClick(index)
                }
            })
        },
        formError(err) {
            console.log(err)
        }
    }
  };
</script>

<style>
</style>
